﻿<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Sample Game - Doors Engine</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="kinetic2d-v1.0.0.js"></script>
<script type="text/javascript" src="doors-core-alpha.js"></script>
<script type="text/javascript" src="myGame-alpha.js"></script>
</head>

<body onload="doorsInit('game-canvas', 'game-canvas-depth', 'game-canvas-object', 'game-tooltip')">

	<div id="center">
		<canvas id="game-canvas" width="640" height="480">
			Unfortunately, your browser does not appear to support the HTML5 Canvas tag.  Please upgrade your browser.
		</canvas>
		<div id="game-tooltip">PLACEHOLDER</div>
		<div class="control-panel">
			<p>
				<button type="button" onclick="startGame()">Start Game</button>
				<button type="button" onclick="stopGame()">Stop Game</button>
			</p>
		</div>
		<div class="debug-panel">
			<p>
				Current x-coordinate: <span id="x-counter"></span>;
				Current y-coordinate: <span id="y-counter"></span>;
				Current depth: <span id="depth-counter"></span>
			</p>
			<p>
				FPS: <span id="fps-counter"></span>
			</p>
			<h2>Event History:</h2>
			<ul id="event-history"></ul>
		</div>
		<canvas id="game-canvas-depth" width="640" height="480">Depth map for game canvas (should be set to display:none)</canvas>
		<canvas id="game-canvas-object" width="640" height="480">Object map for game canvas (should be set to display:none)</canvas>
	</div>
	
</body>

</html>
